import { Outlet,Link,useLocation } from "react-router-dom";

import { Layout,Menu } from "antd";
const { Header, Content, Footer,Sider } = Layout;
import { routerlist } from "../router/index";

export const god=(routes=>{
    return routes.map(route=>{
        const meneItem={
            label:route.meta.title,
            key:route.path
        }
        if(route.children){
            return{
                ...meneItem,
                children:god(route.children)
            }
        }
        return {
            ...meneItem,
            label:<Link to={route.path}>{route.meta.title}</Link>
        }
    })
})


export default function Layouts(){
    const Location=useLocation()
    return (
        <Layout>
            <Header mode="horizontal">
                <Menu style={{display:'flex',justifyContent:'right',}} theme="dark" mode="horizontal" selectedKeys={[Location.pathname]} items={god(routerlist)} />
            </Header>
            <Content>
                <Outlet />
            </Content>
        </Layout>
    )
}